*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-weight: normal;
	font-style: normal;
	outline: none;
	box-shadow: none;
	-webkit-tap-highlight-color: transparent;
}
body {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background: #eee;
	overflow: hidden;
	transition: 1s ease-in-out;
	transition-property: filter, opacity;
}
body.hidden, a.hidden {
	opacity: 0;
}
canvas {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
canvas.hidden {
	top: 50vh;
	transition: top 1s .25s ease-in;
}
a {
	margin: 0 -3px 0 0;
	font: 20px/1 "Special Elite", sans-serif;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #0003;
	user-select: none;
	transition: .5s ease-in-out;
	transition-property: margin, padding, letter-spacing, opacity;
}
a::before {
	position: absolute;
	content: "Fly me to the moon";
	color: #0000;
	transition: color .25s ease-in-out;
}
a:hover {
	margin: 0 -1px 0 0;
	padding: 0 18px;
	letter-spacing: 1px;
}
a:hover::before {
	color: #0006;
}
a span {
	animation: light 1.8s ease-in-out infinite alternate;
}

a span:nth-child(2), a span:nth-child(12) {
	animation-delay: .1s;
}
a span:nth-child(3), a span:nth-child(13) {
	animation-delay: .2s;
}
a span:nth-child(4), a span:nth-child(14) {
	animation-delay: .3s;
}
a span:nth-child(5), a span:nth-child(15) {
	animation-delay: .4s;
}
a span:nth-child(6), a span:nth-child(16) {
	animation-delay: .5s;
}
a span:nth-child(7), a span:nth-child(17) {
	animation-delay: .6s;
}
a span:nth-child(8), a span:nth-child(18) {
	animation-delay: .7s;
}
a span:nth-child(9) {
	animation-delay: .8s;
}
a span:nth-child(10) {
	animation-delay: .9s;
}
a span:nth-child(11) {
	animation-delay: 1s;
}
a span:nth-child(12) {
	animation-delay: 1.1s;
}
a span:nth-child(13) {
	animation-delay: 1.2s;
}
a span:nth-child(14) {
	animation-delay: 1.3s;
}
a span:nth-child(15) {
	animation-delay: 1.4s;
}
a span:nth-child(16) {
	animation-delay: 1.5s;
}
a span:nth-child(17) {
	animation-delay: 1.6s;
}
a span:nth-child(18) {
	animation-delay: 1.7s;
}

@-webkit-keyframes light {
	100% {
		color: #0009;
	}
}

@media (prefers-color-scheme: dark) {
	body {
		background: #272727;
		filter: invert(.9);
	}
}

@font-face {
	font-family: "Special Elite";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local("Special Elite"), url("https://fonts.gstatic.com/s/specialelite/v18/XLYgIZbkc4JPUL5CVArUVL0ntnAOSA.woff2") format("woff2");
	unicode-range: U+0000-00FF;
}